<template>
  <!--tag -->
  <transition-group
    name="el-list"
    :class="['el-upload-list','el-upload-list--'+listType, {'is-disabled':disabled}]"
    tag="ul"
  >
    <li
      v-for="(file,index) in files"
      :key="index"
      :class="['el-uploda-list__item','is-'+file.status, focusing ? 'focusing' : '']"
      tabIndex="0"
      @focus="focusing = true"
      @blur="focusing = false"
      @click="focusing = false"
    >
      <img
        v-if="file.status !== 'uploading' && ['picture-card','picture'].indexOf(listType) >-1"
        :src="file.url"
        class="el-upload-lsit__item-thumbnail"
      >
      <a
        class="el-upload-list__item-name"
        @click="handleClick(file)"
      >
        <!-- <i class='el-icon-document'></i>{{file.name}} 原本的源码 -->
        <i
          class="ext-name-icon"
          :class="fileExtName(file.fName || file.name)"
        />
        <span class="file_f_name">{{ file.fName || file.name }}</span>
      </a>
      <label class="el-upload-list__item.status-label">
        <i
          :class="{
            'el-icon-upload-success':true,
            'el-icon-circle-check':listType === 'text',
            'el-icon-check':['picture-card','picture'].indexOf(listType) > -1   
          }"
        />
      </label>
      <!--附件删除按钮 -->
      <i
        v-if="!disabled && !file.fileDelete"
        class="el-icon-close"
        @click="$emit('remove',file)"
      />
      <!--进度条  -->
      <el-progress
        v-if="file.status === 'uploading'"
        :type="listType ==='picture-card' ? 'circle':'line'" 
        :stroke-width="listType === 'picture-card' ? 6:2"
        :percentage="parsePercentage(file.percentage)"
      />
    </li>
  </transition-group>
</template>
<script>
export default defineComponent({
  name:"Upload",
  props:{
    files:{
      type:Array,
      default:() => []
    },
    disabled:{
      type:Boolean,
      default:false
    },
    listType:{
      type:String,
      default:""
    },
    handlePreview:{
      type:Function,
      default:function() { return "" }
    }
  },
  setup(props) {
    const focusing = ref(false)

    const parsePercentage = () => {
      return parsetInt(val,10)
    }

    const handleClick = (file) => {
      this.handlePreview && this.handlePreview(file)
    }

    const fileExtName = (name) => {
      let iName = ""
      if(name && name.indexOf("xls") > -1) {
        iName = "ic_excel"
      }
      if(name && name.indexOf("fo") > -1) {
        iName = "ic_folder"
      }
      if(name && name.indexOf("g") > -1) {
        iName = "ic_img"
      }
      if(name && name.indexOf("pdf") > -1) {
        iName = "ic_pdf"
      }
      if(name && name.indexOf("ppt") > -1) {
        iName = "ic_ppt"
      }
      if(name && name.indexOf("doc") > -1) {
        iName = "ic_word"
      }
      return iName
    }

    return {
      focusing,
      parsePercentage,
      handleClick,
      fileExtName
    }
  }
})
</script>
<style lang='less' scoped>
.file_f_name {
  vertical-align: middle;
  word-wrap: break-word;
  word-break: break-all;
}

.ext-name-icon {
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  margin-right: 5px;
  background:
    url(".../../assets/upload_icon/ic_commonfile.png") no-repeat center
    center;
  background-size: 100% 100%;

  &.ic_excel {
    background:
      url("../../assets/upload_icon/ic_excel.png") no-repeat center
      center;
    background-size: 100% 100%;
  }

  &.ic_folder {
    background:
      url("../../assets/upload_icon/ic_folder.png") no-repeat center
      center;
    background-size: 100% 100%;
  }

  &.ic_img {
    background: url("../../assets/upload_icon/ic_img.png") no-repeat center center;
    background-size: 100% 100%;
  }

  &.ic_pdf {
    background: url("../../assets/upload_icon/ic_pdf.png") no-repeat center center;
    background-size: 100% 100%;
  }

  &.ic_ppt {
    background: url("../../assets/upload_icon/ic_ppt.png") no-repeat center center;
    background-size: 100% 100%;
  }

  &.ic_word {
    background:
      url("../../assets/upload_icon/ic_word.png") no-repeat center
      center;
    background-size: 100% 100%;
  }
}
</style>